<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/modules/woms/front/include/import-tags.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <title>修复确认</title>
    <link href="${ctxStatic}/css/main.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/style.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="${ctxStatic}/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/js/wo.js"></script>
    <script src="${pageContext.request.contextPath}/static/layer-v2.3/layer/layer.js"></script>
</head>
<style>
    .inputTxt textarea {
        width: 100% !important;
    }

</style>
<body>
<div class="warpe">
    <form:form id="topicForm" modelAttribute="event"  method="post" >
        <input type="hidden" name="id" id="id" value="${event.id}">
        <div class="main">
            <div class="a_input clear_border">
                <span>修复状态</span>
            </div>
            <div class="a_input">
                <form:select path="status"  class="form-control input-sm">
                    <form:option value="" label="请选择"/>
                    <form:options items="${fns:getDictList('achieve_status')}" itemLabel="label" itemValue="value"  htmlEscape="false"/>
                </form:select>
            </div>
            <div class="a_input clear_border">
                <span>描述</span>
            </div>
            <div class="inputTxt" style="margin-top: 1rem;">
                <textarea rows="5" cols="" id="content" name="content"  maxlength="500" onfocus="emptycontext()">这是一个进度回复或处理完成的详细描述，最大字符500</textarea>
            </div>
            <div class="upload">
                <ul data-am-widget="gallery" class="am-gallery am-gallery-overlay" data-am-gallery="{ pureview: true }" id='pics'>
                    <li class="uploadimg" onclick="chImgs();">
                        <a  style="font-size:3rem;">+
                        </a>
                    </li>
                </ul>
            </div>
            <div class="work_bth">
                <a id="submit">提交</a>
            </div>
        </div>
    </form:form>
</div>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    //var loading = layer.load();
    var url=location.href.split('#')[0];
    var result =false;
    $.ajax({
        type : "POST",
        url : "${ctx}/achieve/jsApi?t="+Date.parse(new Date()),
        cache : false,
        dataType : "json",
        async: false,
        data:{url:url},
        success : function(data) {
            result= true;
            if(data.success){
                result = JSON.parse(data.msg);
                init();

            }

        }
    });

    function init(){
        if(result && wx){
            wx.config({
                debug: false,
                appId:  'wx3a0b5ce9478e1365',
                timestamp: result['timestamp'],
                nonceStr: result['nonceStr'],
                signature: result['signature'],
                jsApiList: [
                    'checkJsApi',
                    'chooseImage',
                    'uploadImage'
                ]
            });
            wx.ready(function () {
                layer.close(loading);
            });
            wx.error(function (res) {
                alert('wx.error: '+JSON.stringify(res));
            });
        }else{
            setTimeout(function(){
                init();
            },1000)
        }
    }

    //5 图片接口
    //5.1 拍照、本地选图
    var images = {
        localId: [],
        serverId: []
    };
    var times =0;
    function chImgs(){
        if(times>=9){
            layer.alert('最多只能上传9张图片', {icon: 6});
            return false;
        }
        wx.chooseImage({
            sizeType: ['compressed'],
            sourceType: ['camera'],
            success: function (res) {
                images.localId = res.localIds;
                // alert('已选择 ' + res.localIds.length + ' 张图片');
                if (images.localId.length == 0) {
                    return;
                }
                var i = 0, length = images.localId.length;
                images.serverId = [];
                function upload() {
                    wx.uploadImage({
                        localId: images.localId[i],
                        success: function (res) {
                            i++;
                            images.serverId.push(res.serverId);
                            pai(res.serverId);
                            if (i < length) {
                                upload();
                            }
                        },
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });
                }
                upload();

            }
        });
    }


    //拍图上传
    function pai(mediaId){
        if(times>=9){
            return false;
        }
        $.ajax({
            url:'${ctx}/achieve/uploadPic',
            type:'post',
            data:{mediaId:mediaId},
            dataType:'json',
            timeout:20000,
            success:function(data){
                if(data.success){
                    $('#pics').prepend('<li class="upload_bth" id="p'+times+'"  ><img class="eventpic" src='+data.msg+' /><p><a onclick="delImg(\'p'+times+'\')" class="color_r">删除</a> </p> </li>');
                    times++;
                }else{
                    layer.alert(data.msg, {icon: 6});
                }
            },
            error:function(e){
                layer.alert('服务器忙!', {icon: 6});
            }
        });
    }

    /////////////////////////////////////////////////////

    // 记录输入的文字
    function trim(str){
        return str.replace(/(^\s*)|(\s*$)/g, "");
    }

    $(function($) {
        $('#submit').click(function(){
            var status=$("#status").val();
            if(trim(status)==''){
                layer.msg('请选择回复类型');
                return false;
            }
            var content=$("#content").val();
            if(trim(content)==''||content=='这是一个进度回复或处理完成的详细描述，最大字符500'){
                layer.msg('请输入描述内容');
                return false;
            }
            var data = $("#topicForm").serialize();
            var pics= $('.eventpic');
            if(pics.length>0){
                var ctxLen = '${ctx}'.length;
                $.each(pics,function(i,pic){
                    //alert($(pic).attr('src'));
                    //data+='&pics='+$(pic).attr('src').substring(ctxLen+1);
                    data+='&pics='+$(pic).attr('src');
                });
            }else{
                layer.msg('请上传图片');
                return false;
            }
            layer.confirm('确认要提交吗？',{
                    btn: ['确认','取消']
                }
                , function(index){//用户点击了确认按钮
                    layer.close(index);
                    $(".work_bth").hide();
                    $.ajax({
                        type: "POST",
                        url:'${ctx}/achieve/achieve',
                        data: data,
                        dataType:'json',
                        success : function(json){
                            if(json.success){
                                layer.alert('提交成功!',{icon: 6}, function(index){
                                    layer.close(index);
                                    wx.closeWindow();
                                });
                            }else{
                                layer.alert(json.msg, {icon: 6});
                            }
                        }
                    });
                }, function(index){//用户点击了取消
                    layer.close(index);
                });
        });
    });

    function delImg(id){
        $("#"+id).remove();
    }


    function emptycontext(){
        if("这是一个进度回复或处理完成的详细描述，最大字符500"==trim($("#content").val())){
            $("#content").val("");
        }
    }

</script>

<!--相册放大预览必要文件-->
<link rel="stylesheet" href="${ctxStatic}/css/amazeui.min.css" />
<script src="${ctxStatic}/js/amazeui.js"></script>
</body>
</html>

